import { useState, useEffect } from "react";
import { Empty } from "antd";
// css
import styles from '@/styles/CommonPersonal.module.scss';
// 组件
import Breadcrumb from '@/components/Breadcrumb';
import Aside from '@/pages_components/personal/Aside';
import Item from '@/pages_components/personal/OrderItem';
import Spin from '@/components/Spin';
import Pagination from '@/pages_components/components/Pagination';
import OrderDetail from '@/pages_components/personal/OrderDetail';
// api
import { myOrderList } from '@/api/personal';

const MineOrder = ({ }) => {  

    const defaulStatus = '10,11,20,21,31,40,50,51,52,60,70';

    const filter_list = [
        { name: '全部订单', value: defaulStatus, active: true },
        { name: '待付款', value: '10' },
        { name: '待使用', value: '20' },
        { name: '待评价', value: '60'},
        { name: '已取消', value: '70' },
    ]

    const [filters, setFilters] = useState(filter_list);
    const [status, setStatus] = useState(defaulStatus);
    const [list, setList] = useState([]);
    const [total, setTotal] = useState(0);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        doSearch()
    }, [])

    // 切换filter
    function changeFilter(idx) {
        for (let i = 0; i < filters.length; i++) {
            const filter = filters[i];
            filter.active = false
            if(idx === i){
                filter.active = true;
                setFilters([...filters]);
                setStatus(filter.value);
                doSearch({
                    pageNo: 1,
                    status: filter.value
                })
            }
        }
    }

    // 获取订单数据
    function doSearch(params = {}) {
        setLoading(true)
        myOrderList(params).then(res => {
            const { code, data } = res;
            if(code === 0 && data){
                const { totalCount, records } = data;
                setList([...records])
                setTotal(totalCount)
                window.scrollTo({ top: 0 })
            }
            setLoading(false)
        })
    }

    // 筛选订单
    function onPageChange(curr) {
        doSearch({
            pageNo: curr,
            status: status
        })
    }

    // Component
    const filterComp = (
        <ul className={styles['filters']}>
            {
                filters.map((item, index) => <li className={item.active ? styles['active']:''} onClick={() => {changeFilter(index)}} key={index}>{item.name}</li>)
            }
        </ul>
    )

    return (
        <div className={styles['personal-page']}>
            {/* loading */}
            <Spin loading={loading} />
            <div className="max-content">
                {/* 面包屑 */}
                <Breadcrumb 
                    params={
                        [
                            { name: '个人中心', url: '/personal' },
                            { name: '我的订单', url: '/personal/order' }
                        ]
                    } 
                />
                <div className={styles['wrapper']}>
                    {/* 左侧 */}
                    <Aside />
                    {/* 内容 */}
                    <section className={[styles['content'],styles['order-content']].join(' ')}>
                        { filterComp }
                        <div className={styles['filters-list']}>
                            {
                                !list.length 
                                ? <div className={styles['empty']}>
                                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="无订单数据" />   
                                </div>
                                : list.map((item, index) => <Item data={item} status={status} key={index} />)
                            }
                        </div>
                    </section>
                </div>
                <div className={styles['pagination']}>
                    <Pagination onChange={onPageChange} size={10} total={total} />
                </div>
            </div>
            <OrderDetail />
        </div>
    )
}

export default MineOrder